<template>
  <view v-if="shenheStatus == 0">
    <view class="card_logo flex">
      <view>
        <image mode="aspectFill" :src="pic_url"></image>
      </view>
    </view>
    <view class="card_qrcode flex">
      <view>
        <image :src="url_path" mode="aspectFill"></image>
      </view>
    </view>
    <view class="card_message">
      <view class="card_account">{{ account }}</view>
      <view>使用时向核销员出示核销码</view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      pic_url: '',
      url_path: '',
      account: '',
    };
  },
  onLoad(e) {
    let card_sale_id = e.card_sale_id;
    if (card_sale_id) {
      this.$allrequest.writeOffCode
        .getQrcode({
          sale_id: card_sale_id,
        })
        .then(res => {
          if (res.code === 0) {
            this.pic_url = res.data.pic_url;
            this.url_path = res.data.url_path;
            this.account = res.data.account;
          }
        });
    }
  },
  methods: {},
};
</script>

<style>
.flex {
  display: flex;
  justify-content: center;
}
.card_logo {
  margin-top: 100rpx;
}
.card_logo view {
  width: calc(62rpx * 2);
  height: calc(62rpx * 2);
  border-radius: 50%;
  overflow: hidden;
}
.card_logo image,
.card_qrcode image {
  width: 100%;
  height: 100%;
}

.card_qrcode {
  margin: calc(55rpx * 2);
}
.card_qrcode view {
  width: calc(200rpx * 2);
  height: calc(200rpx * 2);
}

.card_message {
  margin-top: calc(30rpx * 2);
  font-size: calc(14rpx * 2);
  color: #8c8c8c;
  font-weight: 400;
  text-align: center;
}
.card_message .card_account {
  font-weight: 600;
  font-size: calc(16rpx * 2);
  margin-bottom: calc(12rpx * 2);
  color: #262626;
}
</style>
